import React from 'react'
import { motion } from 'motion/react'
import { WobbleCard } from "@/components/ui/wobble-card";
import Image from 'next/image';
import Link from 'next/link';


const Paper = () => {
  return (
    <motion.div
    initial={{opacity: 0}}
    whileInView={{opacity: 1}}
    transition={{duration: 1}}
    id='paper' className='w-full px-[12%] py-10 scroll-mt-20'>
        <motion.h2 
        initial={{y: -20,opacity: 0}}
        whileInView={{y: 0,opacity: 1}}
        transition={{duration: 0.5, delay:0.5}}
        className='text-center text-5xl font-Ovo mb-20'>My Paper</motion.h2>
        <motion.div
        className='grid grid-cols-1 lg:grid-cols-3 gap-4 max-w-7xl mx-auto w-full'>
          <WobbleCard
            containerClassName="col-span-1 lg:col-span-2 h-full bg-pink-800 min-h-[500px] lg:min-h-[300px]"
            className=""
          >
            <a href='/paperTem.pdf'>
            <div className="max-w-xs">
              <h2 className="text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-white">
                Paper Title
              </h2>
              <p className="mt-4 text-left  text-base/6 text-neutral-200">
                Paper  Description With over 100,000 mothly active bot users, Gippity AI is the most
                popular AI platform for developers.
              </p>
            </div>
            <Image 
              src="/paperTem.png"
              width={400}
              height={400}
              alt="Temple Paper image"
              className="absolute -right-[3%] lg:-right-[6%] grayscale filter -bottom-200 ml:-bottom-80 top-20 object-contain rounded-2xl"/>
            </a>

          </WobbleCard>
          <Link href={'/paperTem.pdf'}>
          <WobbleCard containerClassName="col-span-1 min-h-[300px]">
            <h2 className="max-w-80  text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-white">
              No shirt, no shoes, no weapons.
            </h2>
            <p className="mt-4 max-w-[26rem] text-left  text-base/6 text-neutral-200">
              If someone yells “stop!”, goes limp, or taps out, the fight is over.
            </p>
          </WobbleCard>
          </Link>
          <WobbleCard containerClassName="col-span-1 lg:col-span-3 bg-blue-900 min-h-[500px] lg:min-h-[600px] xl:min-h-[300px]">
            <div className="max-w-sm">
              <h2 className="max-w-sm md:max-w-lg  text-left text-balance text-base md:text-xl lg:text-3xl font-semibold tracking-[-0.015em] text-white">
                Signup for blazing-fast cutting-edge state of the art Gippity AI
                wrapper today!
              </h2>
              <p className="mt-4 max-w-[26rem] text-left  text-base/6 text-neutral-200">
                With over 100,000 mothly active bot users, Gippity AI is the most
                popular AI platform for developers.
              </p>
            </div>
          <Link href={'/paperTem.pdf'}>
            <Image
              src="/paperTem.png"
              width={500}
              height={500}
              alt="linear demo image"
              className="absolute -right-10 md:-right-[40%] lg:right-[5%] -bottom-72 md:-bottom-80 lg:-bottom-96 mt-10 object-contain rounded-2xl"
            />
          </Link>
          </WobbleCard>

        </motion.div>
    </motion.div>
  )
}



export default Paper
